<template>
	<view class="content"
		:style="showPicker ? 'overflow: hidden;height: 100vh;' : keyword ? 'height: 100vh !important' : ''">
		<!--   <view class="picker-index">
      <view class="picker-name" @click="showPicker = true">{{
        selectedRegion || "请选择地址"
      }}</view>
      <view class="picker-image">
        <img src="@/static/main/down.png" style="height: 28rpx; width: 28rpx" />
      </view>
      <view class="picker-search">
        <u-search
          placeholder="搜索宝贝,开启租赁新生活"
          :show-action="false"
          :clearabled="true"
          v-model="keyword"
          @change="searList"
        ></u-search>
      </view>
    </view> -->
		<view v-if="!keyword" style="padding-top: 200rpx">
			<view>
				<swiper style="border-radius: 40rpx;" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in slideshowList.img">
						<view style="height: 48vw;" @click="lunBotTo(slideshowList.ids[index])"
							class="swiper-item uni-bg-red">
							<image :src="path + item" mode="aspectFill" style="width: 100%; height: 100%"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 分类 -->
			<view class="imgs">
				<imgs :imgList="goods"></imgs>
			</view>

			<view v-for="(Item,Index) in tags">
				<view class="sift" :style="{background: Index!==0&&Index%2 == 0? '#bd3f00' : 'black' }"
					v-if="Item.tagType==1">
					<view class="sift-h">
						<h3>{{Item.tag}}</h3>
					</view>
					<view class="sift-img">
						<view class="sift-images" v-for="(item2, index) in Item.leaseGoodVos" v-if="index < 4">

							<image class="image-list" :src="url2 + item2.mainImage" mode="aspectFill"
								@click="commodityUrl(Item.leaseGoodVos[index])"></image>
							<text style="width:150rpx; text-align: center; ">{{ item2.description }}</text>
							<view class="tag">￥{{ item2.leaseDayRules[0].leaseRentalRules[0].everydayPrice || '未标价' }}/天
							</view>
						</view>
					</view>
				</view>

				<!-- <view class="sift color-b" v-if="tagList[1]">
				 	<view class="sift-h">
				 		<h3 style="color: #000">大牌推荐</h3>
				 	</view>
				 	<view class="sift-img">
				 		<view class="sift-images" style="color: black" v-for="(item, index) in tags[1]" v-if="index < 4">
				 			<image class="image-list" :src="url2 + item.mainImage" mode="aspectFill" @click="commodityUrl(item.id)"></image>
				 			<text style="text-align: center">{{ item.productName }}</text>
				 			<view class="tag-b">￥{{ item.leaseGoodSkus[0].leaseRentalRules[0].everydayPrice || '未标价' }}/天</view>
				 		</view>
				 	</view>
				 </view> -->
				<view class="container" v-if="Item.tagType==2 && Item.sort>1">
					<!-- 		<view class="title-list">
				 	<text v-for="(item, index) in list" :key="index" :class="['title-item', currentIndex === index ? 'active' : '']" @click="changeSlide(index)">
				 		{{ item.name }}
				 	</text>
				 </view> -->

					<view class="title-list">
						<view class="selectGoodProdct">
							<image src="../static/main/upVote.png" mode="aspectFill" style="" class="image"></image>
							<text :class="['title-item', 0 === index ? 'active' : '']">
								{{ Item.tag }}
							</text>
						</view>
					</view>

					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in getSplit(Item.img)">
							<view @click="lunBotTo(getSplit(Item.productId)[index])" class="swiper-item uni-bg-red">
								<image :src="path + item" mode="aspectFill" style="width: 100%; height: 100%"></image>
							</view>
						</swiper-item>
						<!-- <swiper-item>
				 						<view class="swiper-item uni-bg-green"><image src="../static/main/banner.jpg" mode="aspectFill" style="width:100%;height:100%;"></image></view>
				 					</swiper-item>
				 					<swiper-item>
				 						<view class="swiper-item uni-bg-blue"><image src="../static/main/banner.jpg" mode="aspectFill" style="width:100%;height:100%;"></image></view>
				 					</swiper-item> -->
					</swiper>
				</view>
			</view>


			<view class="hot">
				<view class="hot-top">
					<view class="name">
						<view class="border-left"></view>
						热门产品
					</view>
					<view v-for="(item, index) in data" class="hot-text">
						<text>{{ item }}</text>
					</view>
				</view>
				<recommend :imageList="list"></recommend>
			</view>
			<u-picker :show="showPicker" :columns="columns" @confirm="onConfirm" @cancel="onCancel"></u-picker>
		</view>
		<view v-else>
			<recommend :imageList="list"></recommend>
		</view>
	</view>
</template>

<script>
	import imgs from '@/subPages/components/custom/imgs.vue';
	import recommend from '@/subPages/components/recommend.vue';
	import api from '../api/index.js';
	import main from '../api/main.js';
	import {
		baseUrl
	} from '../config.js';
	import my from '../api/my.js';
	import order from '../api/order.js';
	export default {
		components: {
			imgs,
			recommend
		},
		data() {
			return {
				bannerList: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				keyword: '',
				currentIndex: 0,
				autoPlayTimer: null,
				url2: '',
				showPicker: false,
				data: ['品质认证', '便携效率', '精心挑选'],
				columns: [
					[{
							text: '北京',
							value: '440306'
						},
						{
							text: '上海',
							value: '4403'
						},
						{
							text: '广州',
							value: '44'
						},
						{
							text: '深圳',
							value: '440306'
						}
					]
				],
				selectedRegion: '',
				goods: [],
				slideshowList: [],
				list: [],
				tagList: [],
				path: api.getPath(),
				pageNo: 1,
				pageSize: 10,
				total: 0,
				tags: []
			};
		},
		onLaunch(options) {
			my.alert({
				title: 'app onLaunch',
				content: JSON.stringify(options),
				success: (res) => { //成功处理代码段
				},
			});
			//获取关联普通链接二维码的码值（即二维码地址），放到全局变量 qrCode中
			if (options.query && options.query.qrCode) {
				this.qrCode = options.query.qrCode;
			}
			console.log(options, "二维码")
		},
		onShow() {
			this.url2 = baseUrl;
			//获取标签商品列表
			this.getTagsList();
			//获取商品
			this.getList();
			//获取商品分类
			this.getClass();
			//获取轮播图
			// this.getBanner();
			//标签分类商品
			this.getTatList();
			this.startAutoPlay();

			this.getOrderList()
		},
		beforeDestroy() {
			this.stopAutoPlay(); // 组件销毁前清除定时器
		},
		onReachBottom() {
			if (this.total > this.pageNo * this.pageSize) {
				this.pageNo++;
				this.getFriendsPage();
			}
		},
		methods: {
			getSplit(listStr) {
				return listStr.split(',')
			},
			getOrderList() {
				if (uni.getStorageSync('token')) {
					//已登录判断是否登录过期
					main.getUserInfo()
						.then((res) => {
							order.leaseOrderList({
								userId: res.user.userId,
								msg: 1,
								orderStatus: 4
							}).then(async (res) => {
								if (res.code == 200) {
									let order = res.rows[0];
									const modalRes = await new Promise((resolve, reject) => {
										wx.showModal({
											title: '订单续期',
											content: `您的订单${order.description}即将到期,请及时续租！`,
											success: resolve,
											fail: reject
										});
									});
									// 2. 仅当用户点击"确定"时订阅
									if (modalRes.confirm) {
										uni.navigateTo({
											url: `/subPages/mine/transaction?id=${order.id}&isRenewal=${true}`
										})
									}
									order.msg = 0;
									main.upOrder(order)
								}
							});
						})
				}

			},
			lunBotTo(item) {
				uni.navigateTo({
					url: '/subPages/main/commodity?id=' + item
				});
			},
			//搜索
			searList() {
				this.getList();
			},
			//查询商品分
			getClass() {
				let _this = this;
				main.getGoodsClass()
					.then((data) => {
						_this.goods = data.rows;
					})
					.catch((erro) => {});
			},
			//获取标签商品列表
			getTagsList() {
				main.getTagsList().then((res) => {
					this.tags = res.rows
				});
			},
			//商品
			getList() {
				let _this = this;

				let Inputdata = {
					productName: _this.keyword,
					pageNo: _this.pageNo,
					pageSize: _this.pageSize
				};

				main.getList(Inputdata)
					.then((data) => {
						// _this.list = data.rows;
						this.$set(this, "list", data.rows)
						console.log(data, "数据列表")
						_this.total = data.total;
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			getFriendsPage() {
				console.log("dsaokjdo")
				let _this = this;
				main.getList({
						// productName: _this.keyword,
						pageNum: _this.pageNo,
						pageSize: _this.pageSize
					})
					.then((data) => {
						_this.total = data.total;
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			//标签分类商品
			getTatList() {
				main.getTatList()
					.then((data) => {
						let tagList = [];
						let slideshowList = [];
						let bannerList = [];
						data.rows.forEach((item) => {
							if (item.tagType == 1) {
								tagList.push(item);
							}
							if (item.tagType == 2 && item.tag == '首页轮播图') {
								slideshowList = item;
								slideshowList.img = item.img?.split(',') || [];
								slideshowList.ids = item.productId?.split(',') || [];
							}
							if (item.tagType == 2 && item.tag == '优选好物') {
								bannerList = item.leaseGoodTags;
							}
						});
						this.tagList = tagList;
						this.slideshowList = slideshowList;
						this.bannerList = bannerList;
						console.log(slideshowList, "轮播数据")
					})
					.catch((erro) => {});
			},
			//详情跳转
			commodityUrl(item) {
				console.log(item)
				//	console.log(id,"id")
				uni.navigateTo({
					url: '/subPages/main/commodity?id=' + item.id
				});
			},
			//轮播图
			// getBanner() {
			//   let _this = this;
			//   main
			//     .getBannerList()
			//     .then((data) => {
			//       _this.slideshowList = data.rows;
			//       console.log("data.rows----",data.rows)
			//     })
			//     .catch((erro) => {});
			// },
			onConfirm(e) {
				this.selectedRegion = e.value[0].text; // 使用 text 显示选中的地区
				this.showPicker = false;
			},
			onCancel() {
				this.showPicker = false;
			},
			// 切换图片和介绍
			changeSlide(index) {
				this.currentIndex = index;
			}, // 开始自动轮播
			startAutoPlay() {
				this.stopAutoPlay(); // 防止重复启动
				this.autoPlayTimer = setInterval(() => {
					this.currentIndex = (this.currentIndex + 1) % this.slideshowList?.length;
				}, 3000); // 每3秒切换一次
			},
			// 停止自动轮播
			stopAutoPlay() {
				if (this.autoPlayTimer) {
					clearInterval(this.autoPlayTimer);
					this.autoPlayTimer = null;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.swiper {}

	.content {
		background-attachment: fixed;
		background-image: url('/static/main/Rectangle1.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}

	.picker-index {
		display: flex;
		align-items: center;
		padding-top: 200rpx;
		justify-content: space-around;

		.picker-name {
			font-size: 30rpx;
			margin-left: 20rpx;
		}

		.picker-image {
			margin-left: 10rpx;
		}

		.picker-search {
			display: flex;
			width: 450rpx;

			margin-left: 20rpx;
		}
	}

	.img {
		margin-top: 35rpx;
		width: 100%;
		height: 300rpx;
		border-radius: 15rpx;
	}

	.imgs {
		border-radius: 15rpx;
		margin-top: 35rpx;
		width: 100%;
		background-color: #fff;
	}

	.sift {
		width: 100%;
		height: 350rpx;
		margin-top: 35rpx;
		background-color: #000;
		border-radius: 25rpx 25rpx 0 0;
		position: relative;

		.sift-h {
			display: flex;

			h3 {
				font-weight: bold;
				font-size: 35rpx;
				color: gold;
				margin: 25rpx;
			}
		}

		.sift-img {
			position: absolute;
			top: 100rpx;
			width: 100%;
			height: 250rpx;
			border-radius: 25rpx 25rpx 0 0;
			background-color: #fff;

			display: flex;
			justify-content: space-around;

			.sift-images {
				margin-top: 20rpx;
				font-size: 26rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					margin-bottom: 7rpx;
				}

				text {
					width: 100rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* 限制为两行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.tag {
					font-weight: 600;
					margin-top: 10rpx;
					color: crimson;
				}
			}
		}
	}

	.color-b {
		margin-top: 50rpx;
		background-color: brown;

		.tag-b {
			font-weight: 400;
			font-size: 25rpx;
			margin-top: 10rpx;
			line-height: 40rpx;
			padding: 0 15rpx;
			color: crimson;
			background-color: pink;
			border-radius: 25rpx;
		}
	}

	.container {
		width: 100%;

		.title-list {
			margin-bottom: 30rpx;

			.title-item {
				margin-right: 10rpx;
			}

			.active {
				font-size: 35rpx;
				font-weight: bold;
			}
		}

		.image-container {
			.carousel-image {
				width: 100%;
				height: 250rpx;
			}
		}

		.title-bottom {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.bottom {
				width: 15rpx;
				height: 15rpx;
				margin-left: 10rpx;
				border-radius: 10rpx;
				background-color: #000;
			}

			.active {
				width: 30rpx;
				background-color: paleturquoise;
			}
		}
	}

	.prefecture {
		margin-top: 30rpx;
		width: 100%;
		background: linear-gradient(to bottom, #ffb17d, #ffffff 90%);
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		position: relative;

		.text-url {
			position: absolute;
			font-size: 26rpx;
			color: #c77b5d;
			top: 0rpx;
			right: 0rpx;
			display: block;
			padding: 15rpx 45rpx;
			border-radius: 0 0 0 250rpx;
			background: linear-gradient(to bottom, #ffb17d, #ffffff 130%);
		}

		.sift-h {
			display: flex;

			h3 {
				font-weight: bold;
				font-size: 35rpx;
				margin: 25rpx;
				margin-bottom: 0;
			}
		}

		.prefecture-img {
			display: flex;
			justify-content: space-between;

			.prefecture-images {
				margin: 0 30rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				align-items: center;

				.text {
					width: 150rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.tag {
						font-size: 25rpx;
						background-color: rosybrown;
						color: red;
						margin-right: 5rpx;
						white-space: nowrap;
					}

					.name {
						display: -webkit-box;
						-webkit-line-clamp: 1;
						/* 限制为两行 */
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.numberDate {
						font-size: 25rpx;
						font-weight: 500;
						color: red;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}

	.hot {
		margin-top: 30rpx;

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.hot-top {
			display: flex;
			align-items: center;

			.name {
				display: flex;
				align-items: center;

				.border-left {
					margin-right: 30rpx;
					height: 60rpx;
					width: 15rpx;
					border-radius: 10rpx;
					background-color: aqua;
				}

				font-weight: bold;
				font-size: 33rpx;
			}

			.hot-text {
				margin-left: 20rpx;
				font-size: 25rpx;
				background-color: paleturquoise;
				padding: 0 10rpx;
				border-radius: 50rpx;
				line-height: 40rpx;
			}
		}
	}

	.swiper-item {
		overflow: hidden;
		width: 100%;
		height: 160rpx;
		// margin:26rpx 0 0 36rpx;
	}

	.selectGoodProdct {
		margin-top: 28rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.image {
		margin-right: 10rpx;
		width: 36rpx;
		height: 36rpx;
	}
</style>